<script setup>
import { RouterLink } from 'vue-router';
import TheWelcome from '../components/TheWelcome.vue'
import { RouterView } from 'vue-router';
</script>

<template>
  <div class="home-container">
    <div class="left-menu">
      <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
        <el-sub-menu index="1">
          <template #title>
            <!-- <el-icon>
              <location />
            </el-icon> -->
            <span>{{ $t('home_menu.zzd_module') }}</span>
          </template>
          <!-- <el-menu-item-group title=""> -->
          <el-menu-item index="1-1">
            <div>

              <RouterLink to="/zzd_create">{{ $t('zzd_create.title') }}</RouterLink>
            </div>
          </el-menu-item>
          <el-menu-item index="1-2">
            <div>
              <RouterLink to="/zzd_approve">{{ $t('zzd_approve.title') }}</RouterLink>
            </div>
          </el-menu-item>
          <!-- </el-menu-item-group> -->


        </el-sub-menu>
        <!-- <el-menu-item-group title="系统管理功能"> -->
        <el-sub-menu index="1-4">
          <template #title>{{ $t('home_menu.sysadmin_module') }}</template>
          <el-menu-item index="1-4-1">
            <div>
              <RouterLink to="/sysadmin_home">{{ $t('sysadmin_home.title') }}</RouterLink>
            </div>
          </el-menu-item>
        </el-sub-menu>
        <!-- </el-menu-item-group> -->
        <el-sub-menu index="1-5">
          <template #title>{{ $t('home_menu.user_module') }}</template>
          <el-menu-item index="1-5-1">
            <div>
              <RouterLink to="/user_home">{{ $t('user_home.title') }}</RouterLink>
            </div>
          </el-menu-item>
        </el-sub-menu>


        <el-sub-menu>
          <template #title>{{ $t('home_menu.mdm_module') }}</template>
          <el-menu-item index="1-5-2">
            <div>
              <RouterLink to="/mdm_km">{{ $t('mdm_km.title') }}</RouterLink>
            </div>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>

    </div>
    <div class="right-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
<script>

</script>

<style>
.home-container {
  display: flex;
  height: 100vh;
}

.left-menu {
  max-width: 40%;
  text-align: center;
  padding: 20px;
  background-color: #f4f4f4;
}

.left-menu RouterLink {
  word-break: break-all;
  overflow-wrap: break-word;
}

/* .left-menu a {
  display: block;
  margin: 0 auto;
  margin-bottom: 10px;
  text-decoration: none;
  color: #333;
}

.left-menu a:hover {
  color: #007bff;
} */

.right-content {
  /* flex: 1; */
  width: 100%;
}
</style>
